<script setup>
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'

const table = ref(false)
const srk = ref()
const quxiao = () => {
  srk.value = ''
  table.value = false
}
const bianji = (row) => {
  console.log(row)
  table.value = true
}

const shanchu = async (row) => {
  try {
    await ElMessageBox.alert('这是测试内容', '提示标题', {
      confirmButtonText: '确定',
      customClass: 'custom-message-box', // 添加自定义类名
    })
  } catch (error) {
    console.log(error)
  }
  console.log(row)
}
const showDialog = ref(false)
const form = ref({
  brandName: '',
  brandNamenb: '',
})

const tableData = ref([
  { date: '2024-01-01', name: '宝马' },
  { date: '2024-02-01', name: '奔驰' },
])
</script>
<template>
  <div class="srk">
    <p>品牌: <el-input style="width: 200px"></el-input></p>
    <p style="margin-left: 20px">车型: <el-input style="width: 200px"></el-input></p>
    <p style="margin-left: 20px">配件品类: <el-input style="width: 200px"></el-input></p>
  </div>
  <div class="xrk">
    <p>配件品质: <el-input style="width: 200px"></el-input></p>
    <p style="margin-left: 20px">零件号: <el-input style="width: 200px"></el-input></p>
    <el-button type="primary" style="margin-left: 10px">查询</el-button>
    <el-button type="primary">重置</el-button>
  </div>
  <el-button @click="showDialog = true" type="primary">+新建</el-button>

  <el-table :data="tableData" style="width: 100%; margin-top: 10px">
    <el-table-column prop="date" label="品牌" />
    <el-table-column prop="name" label="型号" />
    <el-table-column prop="date" label="VIN" />
    <el-table-column prop="name" label="零件号" />
    <el-table-column prop="date" label="配件品类" />
    <el-table-column prop="name" label="配件品质" />
    <el-table-column prop="date" label="配件描述" />
    <el-table-column prop="name" label="图片" />
    <el-table-column prop="date" label="建议修理厂供货价（含税）" />
    <el-table-column prop="name" label="4S进货价" />
    <el-table-column prop="date" label="4S销售价" />
    <el-table-column prop="name" label="状态" />
    <el-table-column prop="name" label="操作" style="width: 100px">
      <template #default="{ row }">
        <el-button style="" type="primary" @click="bianji(row)">编辑</el-button>
        <el-button
          style="color: #fff; background-color: red; margin-left: 1px"
          @click="shanchu(row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="showDialog" width="500px">
    <el-form label-width="140px">
      <el-form-item label="品牌" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="车型" style="width: 400px">
        <el-input v-model="form.brandNamenb" />
      </el-form-item>
      <el-form-item label="零件号" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="配件描述" style="width: 400px">
        <el-input v-model="form.brandNamenb" />
      </el-form-item>
      <el-form-item label="配件类型" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="配件品质" style="width: 400px">
        <el-input v-model="form.brandNamenb" />
      </el-form-item>
      <el-form-item label="车架号" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="上传配件图片" style="width: 400px">
        <el-input v-model="form.brandNamenb" />
      </el-form-item>
      <el-form-item label="建议修理厂供货价" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="4S店价" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item label="4S进货价" style="width: 400px">
        <el-input v-model="form.brandNamenb" />
      </el-form-item>
      <el-form-item label="状态" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>

      <el-form-item>
        <div style="display: flex; justify-content: center">
          <el-button type="primary" size="mini" @click="showDialog = false">确定</el-button>
          <el-button size="mini" @click="showDialog = false">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-pagination
    style="margin-left: 800px; margin-top: 30px"
    background
    layout="prev, pager, next"
    :total="1000"
  />
  <el-drawer v-model="table" title="修改" direction="rtl" size="50%">
    <div style="text-align: right; margin-right: 150px">
      <p style="margin-left: 150px; margin-top: -10px">
        品牌:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        型号:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        VIN:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        零件号:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        配件品类:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        配件品质:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        配件描述:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        图片:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        修理厂价格:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        4S进货价:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        4S销售价:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        状态:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
      <p style="margin-left: 150px; margin-top: 10px">
        操作:<el-input v-model="srk" style="width: 200px"></el-input>
      </p>
    </div>
    <el-button type="primary" style="margin-left: 200px; margin-top: 20px">保存</el-button>
    <el-button @click="quxiao" style="margin-top: 20px">取消</el-button>
  </el-drawer>
</template>

<style scoped>
.srk {
  display: flex;
  align-items: center; /* 确保内容在同一行对齐 */
  margin: 5px;
}
.xrk {
  display: flex;
  align-items: center; /* 确保内容在同一行对齐 */
  margin: 5px;
  margin-top: 20px;
}
</style>
